<template>
  <div class="merchandiseCategories">
    <el-button type="primary" @click="addEdit(1, '')">新增类别</el-button>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px;"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="类别名称" width="400">
        <template #default="{row}">
          {{ row.cat_name }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="描述" width="400">
        <template #default="{row}">
          {{ row.descr }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button
            v-if="row.cat_level === 1"
            type="text"
            @click="addEdit(2, row.id)"
          >添加</el-button>
          <el-button type="text" @click="del(row.id)">删除</el-button>
          <el-button type="text" @click="edit(row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template>
      <el-dialog :title="showText" :visible="dialogTableVisible" width="50%" @close="changeDialog">
        <el-form ref="form" label-width="100px" :model="formData" :rules="rules">
          <el-form-item label="行业名称" prop="cat_name">
            <el-input v-model.trim="formData.cat_name" type="text" style="80%" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model.trim="formData.descr" type="text" style="80%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-row type="flex" justify="center">
            <el-col :span="4.5">
              <el-button size="small" @click="changeDialog">取消</el-button>
              <el-button type="primary" size="small" @click="btnOK">确定</el-button>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import { tranListToTreeData } from '@/utils'
import { getData, delData, addData, gainData, updataData } from '@/api/shop/sort'
export default {
  name: 'MerchandiseCategories',
  data() {
    const checkNameRepeat = async(rule, value, callback) => {
      const { data } = await getData()
      let isRepeat = false
      if (this.formData.id) {
        isRepeat = data.some(item => item.cat_pid === this.formData.cat_pid && item.id !== this.formData.id && item.cat_name === value)
      } else {
        isRepeat = data.some(item => item.cat_pid === this.formData.cat_pid && item.cat_name === value)
        console.log(isRepeat)
      }
      if (isRepeat) {
        callback(new Error(`同级类别下已存在${value}`))
      }
      callback()
    }
    return {
      formData: {
        cat_name: '',
        descr: '',
        cat_level: '',
        cat_pid: ''
      },
      rules: {
        cat_name: [
          { required: true, message: '类别不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: checkNameRepeat }
        ]
      },
      dialogTableVisible: false,
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      tableData: []
    }
  },
  computed: {
    showText() {
      return this.formData.id ? '编辑类别' : '新增类别'
    }
  },
  created() {
    this.getshopdata()
  },
  methods: {
    async edit(id) {
      this.dialogTableVisible = true
      const res = await gainData(id)
      this.formData = res.data
    },
    async getshopdata() {
      const res = await getData()
      this.tableData = tranListToTreeData(res.data, '')
    },
    btnOK() {
      this.$refs.form
        .validate()
        .then(async() => {
          if (this.formData.id) {
            return await updataData(this.formData)
          } else {
            return await addData(this.formData)
          }
        })
        .then(() => {
          this.dialogTableVisible = false
          if (this.formData.id) {
            this.$message.success('编辑成功')
          } else {
            this.$message.success('添加成功')
          }
          this.getshopdata()
        })
    },
    changeDialog() {
      this.$refs.form.resetFields()
      this.dialogTableVisible = false
      this.formData = {
        cat_name: '',
        descr: '',
        cat_level: '',
        cat_pid: ''
      }
    },
    addEdit(cat_level, pid) {
      this.formData.cat_level = cat_level
      this.formData.cat_pid = pid
      this.dialogTableVisible = true
    },
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' }).then(
        async() => {
          await delData(id)
          this.$message.success('删除成功')
          this.getshopdata()
        }
      )
    }
  }
}
</script>
<style lang="scss">
  .merchandiseCategories{
    min-width: 1200px
  }
</style>
